import React, { useState } from 'react';
import { Form, Input, Button, Card, message, Typography } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { authAPI } from '../utils/api';
import { useNavigate } from 'react-router-dom';

const { Title } = Typography;

const Login = () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const onFinish = async (values) => {
    setLoading(true);
    console.log('登录请求参数:', values);
    try {
      console.log('发送登录请求...');
      const response = await authAPI.login(values);
      console.log('登录响应:', response);
      if (response.data.success) {
        const { token } = response.data.data;
        console.log('获取到token:', token.substring(0, 20) + '...');
        localStorage.setItem('admin_token', token);
        message.success('登录成功');
        navigate('/dashboard');
      } else {
        console.error('登录失败:', response.data);
        message.error(response.data.message || '登录失败');
      }
    } catch (error) {
      console.error('登录请求错误:', error);
      message.error(error.response?.data?.message || '登录时发生错误');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#f0f2f5' }}>
      <Card style={{ width: 400, borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}>
        <div style={{ textAlign: 'center', marginBottom: '24px' }}>
          <Title level={2}>管理后台登录</Title>
        </div>
        <Form
          name="admin_login"
          onFinish={onFinish}
        >
          <Form.Item
            name="email"
            rules={[{ required: true, message: '请输入邮箱!' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="admin@example.com" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder="密码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }}>
              登录
            </Button>
          </Form.Item>
          <Form.Item>
            <Button 
              type="link" 
              onClick={() => {
                const debugToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJkZWJ1Z191c2VyXzEyMyIsImVtYWlsIjoiZGVidWdAZXhhbXBsZS5jb20iLCJpc0FkbWluIjp0cnVlLCJpYXQiOjE3NTcxMzMwNzIsImV4cCI6MTc1OTcyNTA3MiwiaXNzIjoiY3UtbXItYnVsbC1hcGkifQ.ZUbU0ZmQRJyRzCtvNsuxNDOxjKEkBiVKRKCsEC9FeaA';
                localStorage.setItem('admin_token', debugToken);
                message.success('已设置调试Token (有效期30天)');
                navigate('/dashboard');
              }} 
              style={{ width: '100%' }}
            >
              使用调试Token登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Login;